<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8" />
    <title>CSV 转 XLSX</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/xlsx/0.18.5/xlsx.full.min.js"></script>
    <style>
        body {
            font-family: "Segoe UI", sans-serif;
            padding: 2em;
            background: #f4f6f8;
            color: #333;
        }
        h2 {
            color: #2c3e50;
        }
        .container {
            background: #fff;
            padding: 2em;
            border-radius: 12px;
            box-shadow: 0 4px 12px rgba(0,0,0,0.1);
            max-width: 500px;
            margin: auto;
            text-align: center;
        }
        input[type="file"] {
            margin: 1em 0;
            font-size: 1em;
        }
        button {
            background-color: #3498db;
            color: white;
            border: none;
            padding: 0.7em 1.5em;
            border-radius: 8px;
            cursor: pointer;
            font-size: 1em;
        }
        button:hover {
            background-color: #2980b9;
        }
        #progress {
            margin-top: 1em;
            height: 6px;
            width: 100%;
            background: #ddd;
            border-radius: 3px;
            overflow: hidden;
            display: none;
        }
        #progress-bar {
            height: 100%;
            width: 0%;
            background: #2ecc71;
            transition: width 0.3s ease;
        }
    </style>
</head>
<body>
<div class="container">
    <h2>CSV 转换为 XLSX</h2>
    <input type="file" id="csvFile" accept=".csv" />
    <br />
    <button onclick="convertCSVtoXLSX()">开始转换</button>
    <div id="progress">
        <div id="progress-bar"></div>
    </div>
</div>

<script>
    function updateProgress(percent) {
        const progress = document.getElementById("progress");
        const bar = document.getElementById("progress-bar");
        progress.style.display = "block";
        bar.style.width = percent + "%";
    }

    function convertCSVtoXLSX() {
        const fileInput = document.getElementById("csvFile");
        const file = fileInput.files[0];

        if (!file) {
            alert("请先选择一个 CSV 文件！");
            return;
        }

        const fileNameWithoutExt = file.name.replace(/\.csv$/i, "");

        updateProgress(10);

        const reader = new FileReader();
        reader.onload = function (e) {
            updateProgress(30);
            const csvData = e.target.result;

            const workbookRaw = XLSX.read(csvData, {type: 'string'});
            const rows = workbookRaw.Sheets[workbookRaw.SheetNames[0]];
            const jsonData = XLSX.utils.sheet_to_json(rows, {header: 1});

            updateProgress(60);

            const stringifiedData = jsonData.map(row => row.map(cell => {
                if (typeof cell === 'number') {
                    return `${cell.toString()}`;
                }
                return cell;
            }));

            const newSheet = XLSX.utils.aoa_to_sheet(stringifiedData);
            const workbook = XLSX.utils.book_new();
            XLSX.utils.book_append_sheet(workbook, newSheet, "Sheet1");

            updateProgress(90);

            XLSX.writeFile(workbook, `${fileNameWithoutExt}.xlsx`);
            updateProgress(100);

            setTimeout(() => updateProgress(0), 1000);
        };

        reader.readAsText(file, 'utf-8');
    }
</script>
</body>
</html>
